<!DOCTYPE html>

<html>
<head>
    <title>顶点概念几何图形</title>
    <script type="text/javascript" src="../../three.js/build/three.js"></script>

    <!--鼠标控制-->
    <script type="text/javascript" src="../../three.js/examples/js/controls/OrbitControls.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    // 创建场景对象
    var scene = new THREE.Scene();

    // 创建网格模型
    var geometry = new THREE.Geometry();// 创建一个buffer类型的几何体对象

    // 创建顶点
    var p1 = new THREE.Vector3(0,0,0);// 顶点1坐标
    var p2 = new THREE.Vector3(0,200,0);// 顶点2坐标
    var p3 = new THREE.Vector3(200,0,0);// 顶点3坐标
    var p4 = new THREE.Vector3(0,0,200);// 顶点4坐标

    // 顶点坐标添加到几何体中
    geometry.vertices.push(p1,p2,p3,p4);

    // 设置几何体attributes 属性的位置normal属性
    var color1 = new THREE.Color(0x000000); //顶点1颜色
    var color2 = new THREE.Color(0xff0000); //顶点2颜色
    var color3 = new THREE.Color(0x00ff00); //顶点5颜色
    var color4 = new THREE.Color(0x0000ff); //顶点5颜色
    // 顶点颜色添加几何体
    geometry.colors.push(color1,color2,color3,color4);

    // 和 point/line 有冲突。。
    // 3.face3 实现三角面
    // 设置法向量
    var n1 = new THREE.Vector3(0,0,-1);
    var n2 = new THREE.Vector3(0,0,-1);
    var n3 = new THREE.Vector3(0,0,-1);
    var face1 = new THREE.Face3(0,1,2);// face1
    face1.vertexNormals.push(n1,n2,n3); // 设置法向量方式1
    face1.vertexColors = [
        color1,color2,color3
    ];
    var face2 = new THREE.Face3(0,2,3);// face2
    face2.normal = new THREE.Vector3(0,-1,1); // 设置法向量方式2
    // face2.color = color3;
    face2.vertexColors = [
        color1,color3,color4
    ];
    var face3 = new THREE.Face3(0,1,3);// face3
    face3.normal = new THREE.Vector3(1,-1,1); // 设置法向量方式2
    face3.vertexColors = [
        color1,color2,color4
    ];
    geometry.faces.push(face1,face2,face3);
    // 设置材质
    var material = new THREE.MeshLambertMaterial({
        vertexColors: THREE.VertexColors,
        side: THREE.DoubleSide
    });
    var mesh = new THREE.Mesh(geometry, material); // 网格模型
    scene.add(mesh);

    // 辅助坐标系
    var axisHelper = new THREE.AxesHelper(1000);
    // scene.add(axisHelper);

    // 点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400,200,300);// 点光源位置
    scene.add(point);
    // 环境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);

    // 相机设置
    var width = window.innerWidth;
    var height = window.innerHeight;
    var k = width/height;
    var s = 200;// 三维场景显示范围控制系数，系数越大，显示范围越大
    var camera = new THREE.OrthographicCamera(-s*k, s*k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200);// 相机位置
    camera.lookAt(scene.position);// 设置相机方向

    // 创建渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);// 设置渲染区域大小
    renderer.setClearColor(0xb9d3ff, 1);// 设置背景色
    document.body.appendChild(renderer.domElement);// body 元素中插入

    function iRenderer(){
        // 执行渲染
        renderer.render(scene, camera);

        requestAnimationFrame(iRenderer);
    }
    iRenderer();
    var controls = new THREE.OrbitControls(camera, renderer.domElement);
</script>
</body>
</html>